<template>
<div @click="gotoDetail(talk)" class="discuss_model_box">
  <!--<h1>{{talk.discuss_name}}</h1>-->
  <!--This is a DiscussModel-->
  <!--<img  :src="this.getUIR(talk.img)" alt="">-->
  
  <van-badge v-if="talk.participant >= 1000 && talk.img" content="Hot">
    <img v-show="talk.img" :src="this.getUIR(talk.img)" style="width: 50px;height: 50px" alt="">
  </van-badge>
  <img v-show="talk.img" v-else :src="this.getUIR(talk.img)" style="width: 50px;height: 50px;" alt="">
  <van-badge v-if="talk.participant >= 1000 && !talk.img" content="Hot">
    <span class="discuss_title">{{talk.name}}</span>
  </van-badge>
  <span v-else  class="discuss_title">{{talk.name}}</span>
  <span style="position: absolute;font-size: small;color: rgb(186, 186, 186);right: 15px">{{getNum(talk.participant)}} 讨论</span>
 
</div>
</template>

<script>
export default {
  name: "DiscussModel",
  props:{
    talk:Object
  },
  methods:{
    getNum(participant){
      if (participant >= 1000){
        return  participant / 1000 + "k"
      }else{
        return participant
      }
    },
    gotoDetail(talk){
      console.log("goto discuss_detail")
      this.$router.push({name:'discuss_detail',query:{talk:talk}})
    }
  }
}
</script>

<style scoped>
.discuss_model_box{
  display: flex;
  /*border: black solid 1px;*/
  width: 100%;
  height: 50px;
  margin: 10px 0;
  /*padding: 10px 0px;*/
  line-height: 50px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04) ;
}
.discuss_title{
  width: 200px; /* 设置span的宽度，根据实际情况调整 */
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-align: left;
  margin-left: 5px;
  /*margin-top: 17px;*/
  /*border: 1px solid #ccc; !* 可选，添加边框样式 *!*/
}
/*.discuss_model_box:hover{*/
/*  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04) ;*/
/*}*/
</style>
